<script setup lang="ts">
import { ref } from 'vue'
import HelloWorld from '../components/HelloWorld.vue'
import BaseButton from '../components/common/BaseButton.vue'

const features = ref([
  {
    icon: '🚀',
    title: '快速开发',
    description: '基于 Vue 3 + TypeScript 的现代开发栈'
  },
  {
    icon: '📱',
    title: '响应式设计',
    description: '完美适配各种设备屏幕'
  },
  {
    icon: '🎨',
    title: '主题定制',
    description: '支持明暗主题切换，轻松定制样式'
  },
  {
    icon: '⚡',
    title: '性能优化',
    description: '采用最佳实践，确保最优性能'
  }
])
</script>

<template>
  <div class="page-container home-page">
    <section class="hero-section">
      <div class="container">
        <div class="hero-content">
          <h1>现代化的 Vue 3 应用</h1>
          <p class="hero-subtitle">
            使用最新的技术栈，构建高性能、可扩展的 Web 应用
          </p>
          <div class="hero-actions">
            <BaseButton type="primary" size="large">
              开始使用
            </BaseButton>
            <BaseButton type="secondary" size="large">
              了解更多
            </BaseButton>
          </div>
        </div>
      </div>
    </section>

    <section class="features-section section">
      <div class="container">
        <h2>核心特性</h2>
        <div class="features-grid">
          <div v-for="feature in features" 
               :key="feature.title" 
               class="feature-card">
            <div class="feature-icon">{{ feature.icon }}</div>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <section class="demo-section section">
      <div class="container">
        <HelloWorld msg="Vue + TypeScript" />
      </div>
    </section>
  </div>
</template>

<style scoped lang="scss">
.home-page {
  .hero-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 6rem 0;
    margin-top: -2rem;
    
    .hero-content {
      text-align: center;
      max-width: 800px;
      margin: 0 auto;
      
      h1 {
        font-size: 3.5rem;
        margin-bottom: 1.5rem;
        
        @media (max-width: 768px) {
          font-size: 2.5rem;
        }
      }
      
      .hero-subtitle {
        font-size: 1.5rem;
        margin-bottom: 2rem;
        opacity: 0.9;
        
        @media (max-width: 768px) {
          font-size: 1.2rem;
        }
      }
      
      .hero-actions {
        display: flex;
        gap: 1rem;
        justify-content: center;
        
        @media (max-width: 576px) {
          flex-direction: column;
          align-items: center;
        }
      }
    }
  }
  
  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    
    .feature-card {
      background: var(--bg-color);
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      text-align: center;
      transition: transform 0.3s;
      
      &:hover {
        transform: translateY(-5px);
      }
      
      .feature-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
      }
      
      h3 {
        color: var(--primary-color);
        margin-bottom: 1rem;
      }
      
      p {
        color: var(--secondary-color);
        line-height: 1.5;
      }
    }
  }
}
</style> 